<script setup>
import {inject, ref} from "vue";
import {getNoGetOrdersService, getNoPayOrdersService, getNoShipOrdersService, myOrders} from "@/api/user";
import {cancelOrderService, returnOrderService} from "@/api/cartOrder";

// export default {
//   data() {
//     return {
//       selectedStatus: "0" // 默认选中全部订单
//     };
//   },
//   methods: {
//     selectStatus(status) {
//       this.selectedStatus = status;
//     }
//   }
// };
//
// const orderData=ref([])
// const getMyOrders=async ()=>{
//   const data=await myOrders();
//   if(data.status==1){
//     orederData.value=data.data;
//     console.log('data.data='+data.data);
//   }
// }

const selectedStatus = ref("0"); // 默认选中全部订单
const orderData = ref([]);
const isSearch = inject('isSearch')
isSearch.value=false;

const selectStatus = (status) => {
  selectedStatus.value = status;
  console.log('selectedStatus='+status)
  if(status==='0'){
    getMyOrders();
    console.log('000')
  }
  else if(status==='1'){
      getNoPayOrders();
    console.log('111')
    }
    else if(status==='2'){
      getNoShipOrders();
    console.log('222')
  }
    else if(status==='3'){
      getNoGetOrders();
    console.log('333')
  }
    console.log('orderFata='+orderData.value)

};

const getMyOrders = async () => {
  const data = await myOrders();
  if (data.status === 1) {
    orderData.value = data.data;
    console.log('data.data=', JSON.stringify(data.data));
  }else{
    alert('fail');
  }
};

//获取待付款订单
const getNoPayOrders=async()=>{
   let result=await getNoPayOrdersService();
   if(result.status===1){
     orderData.value=result.data;
   }else{
     alert('获取失败');
   }
}

//获取待发货订单
const getNoShipOrders=async()=>{
  let result=await getNoShipOrdersService();
  if(result.status===1){
    orderData.value=result.data;
  }else{
    alert('获取失败');
  }
}

//获取未收到货的订单
const getNoGetOrders=async()=>{
  let result=await getNoGetOrdersService();
  if(result.status===1){
    orderData.value=result.data;
  }else{
    alert('获取失败');
  }
}

const cancelOrder=async(OrderId)=>{
  const data=await cancelOrderService(OrderId);
  if(data.status==1){
    alert(data.message);
    window.location.reload(true)
  }else{
    alert(data.message);
  }

}

const returnOrder=async(orderId)=>{
  const data=await returnOrderService(orderId);
  if(data.status==1){
    alert(data.message);
    window.location.reload(true)
  }else{
    alert(data.message);
  }
}

getMyOrders();
</script>

<template>
  <div id="show">
    <div id="topNavContent">
        <label class="radio_label">
<!--          <div class="radio_option" id="allContent">-->
            <div :class="{ 'radio-option': true, 'active': selectedStatus === '0' }" @click="selectStatus('0')">全部订单</div>
<!--          </div>-->
        </label>
        <label class="radio_label">
<!--          <div class="radio_option" id="unPayContent">-->
            <div :class="{'radio-option':true,'active':selectedStatus ==='1'}" @click="selectStatus('1')">待付款</div>
<!--          </div>-->
        </label>
        <label class="radio_label">
<!--          <div class="radio_option" id="unShipContent">-->
            <div :class="{ 'radio-option': true, 'active': selectedStatus === '2' }" @click="selectStatus('2')">待发货</div>
<!--          </div>-->
        </label>
        <label class="radio_label">
<!--          <div class="radio_option" id="unGetContent">-->
            <div :class="{ 'radio-option': true, 'active': selectedStatus === '3' }" @click="selectStatus('3')">待收货</div>
<!--          </div>-->
        </label>
    </div>
    <div id="coreContent">
      <div class="accountTitle1">Order Information</div>
      <table id="orderTable" class="shoppingCartTable">
        <thead>
          <th>订 单 号</th>
          <th>下单时间</th>
          <th>总 价</th>
          <th>付款状态</th>
          <th>发货状态</th>
          <th>收货状态</th>
          <th>操 作</th>
        </thead>
                <tr  v-if="orderData.length === 0" >
                  <td colspan="7"><b>Your order information is empty.</b></td>
                </tr>
        <tr v-else v-for="order in orderData" :key="order.orderid">
          <td><router-link :to="{path:'/orderDetails', query:{orderId:order.orderid}}" >{{ order.orderid }}</router-link></td>
          <td>{{ order.orderDate }}</td>
          <td>{{ order.totalprice }}</td>
          <td>{{ order.ispay?'已付款':'未付款' }}</td>
          <td>{{ order.issend?'已发货':'未发货' }}</td>
          <td>{{ order.isget ?'已收货':'未收货'}}</td>
<!--          <td> <button v-if="order.ispay">去退货</button>-->
<!--               <button v-if="!order.ispay&&!order.iscancel" @click="cancelOrder(order.orderid)">取消订单</button>-->
<!--               <p v-if="order.iscancel">已取消</p>-->
<!--          </td>-->

          <td v-if="order.isreturn" >已退货</td>
          <td v-else-if="order.iscancel">已取消</td>
          <td v-else-if="!order.ispay&&!order.iscancel">
            <button :id="'goCancelOrder' + order.orderid" @click="cancelOrder(order.orderid);" >取消订单</button>
            <span :id="'cancel' + order.orderid" style="display:none;">取消成功</span>
          </td>
          <td v-else-if="order.ispay && !order.isreturn">
            <button :id="'goReturn' + order.orderid" @click="returnOrder(order.orderid)">去退货</button>
            <!--            <span th:if="${order.isget}">已完成</span>-->
            <!--            <span th:id="${order.orderid}" th:text="'已退货'" style="display:none;"></span>-->
          </td>

        </tr>

<!--        <tr  v-if="orderList.length === 0" >-->
<!--          <td colspan="7"><b>Your order information is empty.</b></td>-->
<!--        </tr>-->
<!--        <tr  v-else v-for="order in orderList" :key="order.orderid">-->
<!--          <td class="">-->
<!--            <a :href="'/user/orderForm?orderId=' + order.orderid">{{ order.orderid }}</a>-->
<!--          </td>-->
<!--          <td>{{ order.orderDate }}</td>-->
<!--          <td>{{ order.totalprice }}</td>-->
<!--          <td>{{ order.ispay? '已付款':'未付款' }}</td>-->
<!--          <td>{{ order.issend ?'已发货':'未发货'}}</td>-->
<!--          <td>{{ order.isget ?'已收货':'未收货'}}</td>-->
<!--          <td v-if="order.isreturn">-->
<!--            已退货-->
<!--          </td>-->
<!--          <td v-else-if="!order.ispay">-->
<!--            <button :id="'goCancelOrder' + order.orderid" @click="cancelOrder(order.orderid);" >取消订单</button>-->
<!--            <span :id="'cancel' + order.orderid" style="display:none;">取消成功</span>-->
<!--          </td>-->
<!--          <td v-else-if="order.ispay && !order.isreturn">-->
<!--            <button :id="'goCancel' + order.orderid" v-if="!order.isget" @click="returnOrder(order.orderid);" class="Button">去退货</button>-->
<!--&lt;!&ndash;            <span th:if="${order.isget}">已完成</span>&ndash;&gt;-->
<!--&lt;!&ndash;            <span th:id="${order.orderid}" th:text="'已退货'" style="display:none;"></span>&ndash;&gt;-->
<!--          </td>-->
<!--        </tr>-->
      </table>
    </div>
  </div>
</template>

<style>
#topNavContent{
  float: left;
  width: 150px;
  height: 140px;
}
.radio_option {
  padding: 10px;
  background-color: #dfeae4;
  border-bottom: 1px solid #9ab5a7;
  text-align: left;
}
.radio_option input[type="radio"] {
  display: none;
  cursor: pointer;
}
.active {
   background-color: #005e21;
  padding: 10px;
  border-bottom: 1px solid #9ab5a7;
  text-align: left;
  color: #FFFFFF;
 }

.radio-option:not(.active) {
  background-color: #dfeae4;
  padding: 10px;
  border-bottom: 1px solid #9ab5a7;
  text-align: left;
}
#orderTable td{
  color:#37833d;
  font-weight: bold;
  text-align: center;
  text-shadow: -1px -1px 1px #FFFFFF;
  background-color: #dae8da;
  font-size: 20px;
}
.accountTitle1 {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #146e34;
  padding: 5px;
  margin: 20px 0;
}
#orderTable button{
  width:60%
}

</style>